* {
    padding: 0;
    margin: 0;
}

body {
    perspective: 1000px;
    background: url("./images/5324.gif_wh860.gif");
    background-size: 100%;
}

.zhan{
    width: 100%;
    height: 300px;
}

.container {
    height: 200px;
	width: 200px;
	margin: 250px auto;
	position: relative;
	perspective: 2000px;
	/*实现3d效果*/
	transform-style: preserve-3d;
	/*	表示所有子元素在3D空间中呈现。*/
	transform: rotateX(20deg) rotateY(30deg);
	/*定义转换，只是用 X 轴的值。   定义转换，只是用 Y 轴的值。*/
	transform-origin: 50% 50% 0;
	/*单独100px也行*/
	animation: move 6s linear infinite;
	/*  linear:每一步的距离和前一步都是相同的，也就是等速
	若不加linear，那会默认速度会加快然后最后一点距离再减速 */
}

/* 大正方形 */
.img-inner {
    position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: 2s;
}

/* translateZ(z)  定义 3D 转换，只是用 Z 轴的值。*/
/* scaleY(y)   通过设置 Y 轴的值来定义缩放转换。*/
.container>img:nth-child(1) {
	transform: rotateY(0deg) translateZ(100px);
}

.container>img:nth-child(2) {
	transform: translateZ(-100px) rotateY(180deg);
}

.container>img:nth-child(3) {
	transform: rotateY(90deg) translateZ(100px);
}

.container>img:nth-child(4) {
	transform: rotateY(-90deg) translateZ(100px);
}

.container>img:nth-child(5) {
	transform: rotateX(90deg) translateZ(100px);
}

.container>img:nth-child(6) {
	transform: rotateX(-90deg) translateZ(100px);
}


/* 小正方形 */
.img-inner1{
    display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 50px;
}

.container>img:nth-child(7) {
	transform: rotateY(0deg) translateZ(50px);
}

.container>img:nth-child(8) {
	transform: translateZ(-50px) rotateY(180deg);
}

.container>img:nth-child(9) {
	transform: rotateY(90deg) translateZ(50px);
}

.container>img:nth-child(10) {
	transform: rotateY(-90deg) translateZ(50px);
}

.container>img:nth-child(11) {
	transform: rotateX(90deg) translateZ(50px);
}

.container>img:nth-child(12) {
	transform: rotateX(-90deg) translateZ(50px);
}

@-webkit-keyframes move {

	/* from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);} */
	/* 上面和下面是一样的 */
	0% {
		transform: rotateX(0deg) rotateY(0deg);
	}

	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}


/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
.container:hover {
	cursor: pointer;
}

.container:hover>img:nth-child(1) {
	transform: rotateY(0deg) translateZ(200px);
}

.container:hover>img:nth-child(2) {
	transform: translateZ(-200px) rotateY(180deg);
}

.container:hover>img:nth-child(3) {
	transform: rotateY(90deg) translateZ(200px);
}

.container:hover>img:nth-child(4) {
	transform: rotateY(-90deg) translateZ(200px);
}

.container:hover>img:nth-child(5) {
	transform: rotateX(90deg) translateZ(200px);
}

.container:hover>img:nth-child(6) {
	transform: rotateX(-90deg) translateZ(200px);
}